<template>
  <div class="app-container">
    <el-form :model="form" label-width="100px" ref="form">
      <!--专题相关信息-->
      <el-row :gutter="0">
        <el-col :span="18">
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item prop="subjectName" label="专题名称">
                <el-input placeholder="请输入专题名称" v-model="form.subjectName" class="filter-item" auto-complete="off"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="16">
              <el-form-item prop="subjectInfo" label="专题简介">
                <el-input placeholder="请输入专题简介" v-model="form.subjectInfo" class="filter-item" auto-complete="off" type="textarea" :rows="4"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="subjectStatus" label="审核状态">
                <el-radio v-model="form.subjectStatus" :label="0">预设</el-radio>
                <el-radio v-model="form.subjectStatus" :label="1">发布</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item prop="subjectImage" label="预览图">
                <el-upload
                  class="avatar-uploader"
                  action="/api/cms/common/uploadFile"
                  :show-file-list="false"
                  :on-success="handleShowImageUploadSuccess">
                  <img v-if="form.subjectShowImage" :src="form.subjectShowImage" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item prop="subjectImage" label="分享图">
                <el-upload
                  class="avatar-uploader"
                  action="/api/cms/common/uploadFile"
                  :show-file-list="false"
                  :on-success="handleImageUploadSuccess">
                  <img v-if="form.subjectImage" :src="form.subjectImage" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>专题内容数据</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleSaveColumnButtonClick">新增栏目</el-button>
            </div>
            <div  v-for="(item, index) in form.column" class="text item">
              <!--专题所属栏目信息-->
              <el-row :gutter="0">
                <el-col :span="12">
                  <el-form-item prop="columnName" label="栏目名称">
                    <el-input placeholder="请输入专题栏目名称" v-model="item.columnName" class="filter-item" auto-complete="off"/>
                  </el-form-item>
                  <el-form-item prop="dataId" label="内容数据">
                    <el-input placeholder="请输入专题内容ID值,多个内容请使用英文逗号分隔" v-model="item.dataId" class="filter-item" auto-complete="off" type="textarea" :rows="4"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="columnStatus" label="栏目状态">
                    <el-radio v-model="item.columnStatus" :label="0" border>预设</el-radio>
                    <el-radio v-model="item.columnStatus" :label="1" border>发布</el-radio>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click.prevent="handleDeleteColumnButtonClick(item)">删除当前专题栏目</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="24">
          <el-button type="primary" @click.native.prevent="handleSaveButtonClick('form')">保存数据</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  // 组件引入
  // 方法工具引入
  import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
  import { getPermission } from '@/utils/UserCookies';
  // 接口引入
  import { saveCmsSubjectGroupData } from "@/api/content";
  export default {
    name: "subject",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      return {
        pageData:{},// 页面配置数据
        form:{
          subjectName: "",
          subjectImage: "",
          subjectShowImage: "",
          subjectInfo: "",
          subjectStatus: 0,
          subjectHomeImage: "",
          column: [{
            columnName: "",
            columnStatus: 0,
            columnShowIndex: 0,
            dataId: ""
          }]
        },// 页面表单
        formRules: {},// 表单验证
        responseData: {},// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods:{
      // 事件函数
      handleShowImageUploadSuccess(response){
        this.form.subjectShowImage = response.data;
      },// 展示如上传成功
      handleImageUploadSuccess(response){
        this.form.subjectImage = response.data;
      },// 分享图上传成功
      handleSaveColumnButtonClick(){
        this.form.column.push({
          columnName: "",
          columnStatus: 0,
          dataId: "",
        });
      },// 栏目保存按钮点击事件
      handleDeleteColumnButtonClick(item){
        let index = this.form.column.indexOf(item);
        if (index !== -1) {
          this.form.column.splice(index, 1)
        }
      },// 删除栏目按钮
      handleSaveButtonClick(formName){
        // 判断该用户是否有更改发布状态的权限
        if (PermissionsToDetectFormUser(getPermission(), "450001")){
          this.$confirm('此操作将保存当前数据, 请核对后继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.saveCmsSubjectGroupData();
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 大表单保存按钮
      // 接口
      saveCmsSubjectGroupData(){
        saveCmsSubjectGroupData(this.form).then(response => {
          if (response.code === "200"){
            this.$message.success("保存成功");
            this.$jump.push({path: "/content/subject"});
          } else {
            this.$message.warning(response.message);
          }
        }).catch(close => {
          console.log(close);
        });
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created: function () {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
